<template>
	<view>

		<view class="content">
			<z-paging ref="paging" v-model="workOrderList" @query="queryList">
				<template #top>
					<u-navbar :fixed="false" title="投料列表" :autoBack="true" :safeAreaInsetTop="true"
						leftIconColor="#fff"></u-navbar>

					<view class="SearchBox">
						<u-search :showAction="true" v-model="searchValue" placeholder="请搜索关键字" searchIcon=" "
							shape="square" actionText="搜索" @search="OnSearch" @custom="OnSearch"
							:actionStyle="{color:'#fff'}" :animation="false">
							<template v-slot:label>
								<view @click="OpenFilter" class="x-f"
									style="font-size: 14px;border-right: 1px solid #999;padding-right: 10px;margin-right: 4px;">
									<text>筛选</text>
									<u-icon name="arrow-down-fill" color="#000000" size="10"
										style="margin-left: 4px;"></u-icon>
								</view>
							</template>
						</u-search>
					</view>

					<!-- 悬浮按钮_新增 -->
					<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
						:initialBottom="80" @btnClick="ToAddTicketBtn">
						<template #BtnContent>
							<u-icon name="plus" color="#fff" size="54rpx"></u-icon>
						</template>
					</m-drag-button>
				</template>

				<view class="" style="padding: 0 10px;padding-top: 10rpx;">
					<view class="content_main_CardBox" style="margin-bottom: 10rpx;"
						v-for="(item,index) in workOrderList" :key="index" :id="'item-' + index"
						@click="ChoiceCard(item)">
						<view class="x-f">
							<view class="content_main_CardBox_ordinal">
								{{index + 1}}
							</view>

							<view style="margin-left: 20rpx;">{{item.BillNO}}</view>
						</view>

						<view class="Card_Form">
							<m-field label="单据日期" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="true" borderColor="#f4f4f4">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.BillDate}}</view>
								</template>
							</m-field>

							<m-field label="派工单号" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="true" borderColor="#f4f4f4">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.JobOrderBillNO}}</view>
								</template>
							</m-field>

							<m-field label="来源工单" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="true" borderColor="#f4f4f4">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.WoOrderBillNO}}</view>
								</template>
							</m-field>

							<m-field label="品名" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="true" borderColor="#f4f4f4">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.ProductName}}</view>
								</template>
							</m-field>

							<m-field label="规格" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="false">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.ProductSpec}}</view>
								</template>
							</m-field>
						</view>
					</view>
				</view>
			</z-paging>
		</view>

		<u-popup class="MainPopup" :show="FilterPopup" mode="right" :round="12" @close="closeFilterPopup">

			<view class="f-dc" style="width: 80vw;height: 100vh;">
				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>


				<view class="MainBox f-dc FilterMainBox">
					<view class="TitleBox">
						<!-- <view style="font-size: 14px;">单据日期</view> -->

						<m-field labelFontSize="14px" labelWidth="80px" paddings="12rpx 0" :borderBottom="false"
							label="单据日期:">
						</m-field>


						<m-field labelFontSize="14px" labelWidth="80px" paddings="12rpx 0" :borderBottom="true"
							label="开始时间:">
							<template v-slot:custom-value>
								<view class="x-f" @click="ChoiceTime('start')">
									<text v-if="FilterFormData.StartTime"
										class="Date_Text">{{dateFormat(FilterFormData.StartTime)}}</text>

									<text v-else style="font-size: 12px;color: #999;">请选择</text>
								</view>
							</template>
						</m-field>

						<m-field labelFontSize="14px" labelWidth="80px" paddings="12rpx 0" :borderBottom="true"
							style="margin-top: 10rpx;" label="结束时间:">
							<template v-slot:custom-value>
								<view class="x-f" @click="ChoiceTime('end')">
									<text v-if="FilterFormData.EndTime"
										class="Date_Text">{{dateFormat(FilterFormData.EndTime)}}</text>

									<text v-else style="font-size: 12px;color: #999;">请选择</text>
								</view>
							</template>
						</m-field>


					</view>
				</view>



				<view class="PopupBottomBox x-f">
					<button @click="ResetFilterBtn">重置</button>
					<button @click="ComfirmFilterBtn">筛选</button>
				</view>
			</view>
		</u-popup>

		<!-- 时间选择器 -->
		<u-datetime-picker class="DateTimerPick" ref="datetimePicker" :title="PickerTitle" :show="showTimePicker"
			v-model="DatetimeData" mode="date" :closeOnClickOverlay="true" @close="ClosePicker" @cancel="ClosePicker"
			@confirm="ConfirmTime" :formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				workOrderList: [],
				searchValue: '',

				BtnShow: false, // 是否展示新增悬浮按钮
				FilterPopup: false, // 筛选弹层
				FilterFormData: {
					StartTime: '',
					EndTime: '',
				},
				PickerTitle: '',
				showTimePicker: false, // 时间选择器弹层显示
				DatetimeData: '',
			};
		},
		mounted() {
			let that = this;
			that.$nextTick(() => {

				that.BtnShow = true;
			})

			uni.$on('FeedRefresh', function() {
				that.OnSearch();
			})
		},
		methods: {
			formatter(type, value) { // 时间选择器数据格式化
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			ClosePicker() { // 关闭时间选择器
				this.DatetimeData = Number(new Date());
				this.showTimePicker = false;
			},
			ConfirmTime(data) { // 确认时间

				if (this.TimeType == 'start') {

					if (!this.$utils.isEmpty(this.FilterFormData.EndTime) && Number(data.value) > Number(this
							.FilterFormData
							.EndTime)) {
						return uni.showToast({
							title: '开始时间不能高于结束时间',
							icon: 'none'
						});
					}

					this.FilterFormData.StartTime = data.value;
				} else if (this.TimeType == 'end') {
					if (!this.$utils.isEmpty(this.FilterFormData.StartTime) && Number(data.value) < Number(this
							.FilterFormData
							.StartTime)) {
						return uni.showToast({
							title: '结束时间不能低于开始时间',
							icon: 'none'
						});
					}
					this.FilterFormData.EndTime = data.value;
				}
				this.showTimePicker = false;
			},
			OpenFilter() { // 打开筛选
				let that = this;
				this.FilterPopup = true;

			},
			closeFilterPopup() {
				this.FilterPopup = false;
			},
			queryList(pageNo) {
				let that = this;
				// that.$refs.paging.complete([]);

				that.$utils.showLoading();

				let obj = {
					SearchKey: that.searchValue,
					pageIndex: pageNo,
					pageSize: 30,
					FBdate: that.dateFormat(that.FilterFormData.StartTime),
					FEdate: that.dateFormat(that.FilterFormData.EndTime),
				}

				// console.log(obj)

				that.Request.request('XGD_SCTList', obj, (ret) => {
					if (ret.status == 200) {
						that.$refs.paging.complete(ret.data.ds);


						that.$utils.hideLoading();
					} else {
						that.$refs.paging.complete([]);
					}
				})
			},
			OnSearch() {
				this.$refs.paging.reload();
			},
			ToAddTicketBtn() {
				uni.navigateTo({
					url: './AddFeeding'
				})
			},
			ChoiceTime(type) { // 点击时间
				var that = this;
				this.TimeType = type;
				let dates = new Date();
				if (type == 'start') {
					if (!that.$utils.isEmpty(that.FilterFormData.StartTime)) {
						dates = that.FilterFormData.StartTime;
					}
					that.DatetimeData = Number(dates);
					this.PickerTitle = '开始时间';
				} else if (type == 'end') {
					if (!that.$utils.isEmpty(that.FilterFormData.EndTime)) {
						dates = that.FilterFormData.EndTime;
					}
					that.DatetimeData = Number(dates);
					this.PickerTitle = '结束时间';
				} else {
					that.DatetimeData = Number(new Date());
					this.PickerTitle = '';
				}

				that.showTimePicker = true;
			},
			dateFormat(val) { // 格式化时间
				var that = this;
				if (!that.$utils.isEmpty(val)) {
					return that.Request.dateFormat(new Date(val), 'Y-MM-dd');
				} else {
					// return '请选择'
					// return that.Request.dateFormat(new Date(), 'Y-MM-dd');
					return ''
				}
			},
			ResetFilterBtn() {
				this.searchValue = '';
				Object.keys(this.FilterFormData).forEach(item => {
					this.FilterFormData[item] = '';
				})
				this.OnSearch();
			},
			ComfirmFilterBtn() {
				this.OnSearch();
			},
			ChoiceCard(data) {
				let that = this;

				// console.log(data)
				uni.navigateTo({
					url: './AddFeeding?ProductionFeedID=' + data.ProductionFeedID
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #eeeeee;
		// padding: 0 10px !important;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.SearchBox {
		background-color: #fff;
		background-color: #51d0d0;
		padding: 6px 10px;
	}



	// 筛选弹层
	.FilterMainBox {
		padding: 20rpx 30rpx !important;
		flex: 1;
		overflow: auto;
		padding-bottom: 20px;

		.TitleBox {
			font-size: 14px;
			margin-bottom: 20rpx;
		}

		// 时间选择样式
		.Select_Box {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;

			.Select_Date {
				justify-content: space-between;
				padding: 6px 12px;
				background-color: #f0f0f0;
				border: 1px solid #f0f0f0;
				border-radius: 9999px;
				width: 46%;
				margin-top: 8px;
			}

			.Select_Date_Active {
				background-color: #e1f7f8 !important;
				border: 1px solid #51d0d0 !important;
				color: #51d0d0 !important;
			}

			// 起止时间
			.ChoiceTimesBox {
				width: 100%;
				display: flex;
				align-items: center;
				// background-color: #fff;
				padding: 10px 20px;
				margin-top: 6px;

				.TimeBox {
					// flex: 1;
					// display: flex;
					// align-items: center;
					// justify-content: space-evenly;
					// margin-left: 10px;

					.timer {
						width: 100%;
						flex: 2;
						display: flex;
						flex-direction: column;
						// align-items: center;
						font-size: 16px;
						color: #333;

						text:first-child {
							margin-bottom: 10px;
							font-weight: 600;
						}

						text:last-child {
							height: 20px;
						}

						.Date_Text {
							color: #999;
						}
					}

					.Icon {
						flex: 1;
					}
				}
			}

		}


	}


	.MainBox {
		padding: 0px 2px;
		flex: 1;
		overflow: auto;
	}

	.PopupBottomBox {
		justify-content: space-evenly;
		padding: 8rpx 8rpx;
		border-top: 1px solid #ececec;

		button {
			width: 44%;

			&:first-child {
				background-color: #fff;
				color: #51d0d0;
				border: 1px solid #51d0d0;
			}

			&:last-child {
				background-color: #51d0d0;
				color: #fff;
			}
		}
	}

	// 时间选择器
	.DateTimerPick {

		.u-transition {
			z-index: 9999999 !important;
		}
	}
</style>